<script setup>
import * as THREE from "three";
import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { onMounted } from "vue";

function initScene() {
  let camera, scene, renderer;
  let model; // 创建场景

  scene = new THREE.Scene();
  scene.background = new THREE.Color("#000"); // 背景颜色为黑色
  scene.fog = new THREE.Fog(0xa0a0a0, 10, 500); // 雾效，增加远近的模糊

  camera = new THREE.PerspectiveCamera(
    35,
    (window.innerWidth - 201) / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 80, 200); // 相机的位置
  scene.add(camera); 

  // 半球光
  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
  hemiLight.position.set(0, 100, 0);
  scene.add(hemiLight); 

  // 平行光
  const dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(0, 40, 50);
  dirLight.castShadow = true;
  dirLight.shadow.camera.top = 50;
  dirLight.shadow.camera.bottom = -25;
  dirLight.shadow.camera.left = -25;
  dirLight.shadow.camera.right = 25;
  dirLight.shadow.camera.near = 0.1;
  dirLight.shadow.camera.far = 200;
  dirLight.shadow.mapSize.set(1024, 1024);
  scene.add(dirLight); 

  renderer = new THREE.WebGLRenderer({ antialias: true });
  const canvasFrame = document.querySelector("#three");
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth - 201, window.innerHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  canvasFrame.appendChild(renderer.domElement); 

  // 加载3D模型
  const loader3mf = new ThreeMFLoader();
  
  loader3mf.load("/3dMode/ttt1.3mf", function (object) {
    console.log(object);
    object.quaternion.setFromEuler(new THREE.Euler(-Math.PI / 2, 0, 0));
    object.scale.set(0.3, 0.3, 0.3);
    object.position.set(0, 0, 0); // 确保模型居中

    // 自动调整相机
    const bbox = new THREE.Box3().setFromObject(object);
    const center = bbox.getCenter(new THREE.Vector3());
    const size = bbox.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    const offset = maxDim * 1.5;

    // 将相机设置在模型的正前方
    camera.position.set(center.x, center.y, center.z + offset);
    camera.lookAt(center);

    object.traverse(function (child) {
      child.castShadow = true;
      if (child.material) {
        child.material.transparent = true;
        child.material.opacity = 1;
      }
      if (child.isMesh) {
        // 为每个mesh设置新的材质
        const material = new THREE.MeshPhongMaterial({
          color: new THREE.Color(Math.random(), Math.random(), Math.random()),
          emissive: new THREE.Color(0x111111),
          shininess: 30,
          flatShading: true,
          side: THREE.DoubleSide,
        });
        child.material = material;
      }
    });

    model = object;
    scene.add(model); // 添加模型到场景
    animate();

    // 添加OrbitControls
    const viewControls2 = new OrbitControls(camera, renderer.domElement);
    viewControls2.enableDamping = true;
    viewControls2.dampingFactor = 0.25;
    viewControls2.enableZoom = true;
    // viewControls2.autoRotate = true;
    viewControls2.enablePan = true;
    viewControls2.maxDistance = 1000;
     
    
    viewControls2.target.set(center.x, center.y, center.z); // 设置OrbitControls围绕模型的中心旋转
    viewControls2.update(); // 更新控制器
  });

  // 动画循环
  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  // 渲染场景
  function render() {
    renderer.render(scene, camera);
  }
}

onMounted(() => {
  initScene();
});
</script>
<template>
  <div id="three"></div>
</template>
<style scoped></style>
